import { Link } from 'react-router-dom';
import { withRouter } from 'react-router';
import React, { useEffect, useMemo, useRef } from 'react';

import moment from 'moment';
import { cloneDeep } from 'lodash';
import cn from 'classnames';
import PropTypes from 'prop-types';

import Table from '@knownsec/react-component/dist/Table';
import Dialog from '@knownsec/react-component/dist/Dialog';
import Tooltip from '@knownsec/react-component/dist/Tooltip';
import Pagination from '@knownsec/react-component/dist/Pagination';
import Message from '@knownsec/react-component/dist/Message';

import Cascader from 'antd/lib/cascader'
import { Progress, Menu, Dropdown } from 'antd';

import CheckAlert from './CheckAlert';
import { getResD } from '../../../../../index';
import confirm from '../../../../../components/confirm';
import { filterNull } from '../../../../../../common/validation/common';
import EmptyData from '../../../../../components/empty/EmptyData';
import CopyBoard from '../../../../../components/CopyBoard';
import { WARNING_CATEGORY_KEY_LABEL_MAP } from '../../../../../../common/constants';
import { GetQueryString, turnToUrlparam } from '../../../../../helpers/getUrlParams';

import Button from '@kuiper-components/button';
import Input from '@kuiper-components/input';
import Select, { Option } from '@kuiper-components/select';
import Switch from '@kuiper-components/switch';
import {
	Search24 as SearchIcon,
	ChevronDown16 as ChevronDown,
} from '@carbon/icons-react';

import s from './style.module.css';
import fetchFer from 'API/fetch';

const taskType = { schedule: '周期性任务', manual: '单次任务' };
const monitorStatus = {
	waiting: '等待调度',
	active: '正在检测',
	stopped: '检测停止',
	completed: '检测完成',
};
const bgColor = {
	'#BB0707': 'rgba(187,7,7,.08)',
	'#FF0000': 'rgba(255,0,0,.08)',
	'#F67E23': 'rgba(246,126,35,.08)',
	'#FED831': 'rgba(254,216,49,.08)',
	'#11AB4E': 'rgba(17, 171, 78, .08',
};
const typeColor = {
	critical: '#BB0707',
	high: '#FF0000',
	medium: '#F67E23',
	low: '#FED831',
	black_links: '#FF0000',
	foreign_links: '#FF0000',
	broken_links: '#FED831',
	cryjack: '#FF0000',
	malscan: '#FF0000',
	keyword: '#FED831',
	privacy_disclosure: '#FED831',
	structure: '#FED831',
	text: '#FED831',
	resource: '#FED831',
};
const levelColor = {
	5: '#BB0707',
	4: '#FF0000',
	3: '#F67E23',
	2: '#FED831',
	0: '#11AB4E',
};
const typeLevel = [
	'critical',
	'high',
	'medium',
	'black_links',
	'foreign_links',
	'cryjack',
	'malscan',
	'low',
	'broken_links',
	'keyword',
	'privacy_disclosure',
	'structure',
	'text',
	'resource'
];
const defaultFilter = {
	page: 1,
	limit: 10,
};
const TaskMap = {
	vul: 'Web漏洞',
	ssl: 'SSL安全',
	security_event: '安全事件',
	content: '内容违规',
  change_check: '篡改'
}
const TaskMap2 = Object.keys(TaskMap).reduce((t, k) => {
	if (k === 'security_event') {
		t[TaskMap[k]] = 'securityEvent'
	} else if (k === 'change_check') {
		t[TaskMap[k]] = 'changeCheck'
	} else {
		t[TaskMap[k]] = k
	}
	return t
}, {})
const TaskSubMap = {
  vul: {
    critical: '严重',
    high: '高危',
    medium: '中危',
    low: '低危',
  },
  ssl: {
    high: '高危',
    medium: '中危',
    low: '低危',
  },
  security_event: WARNING_CATEGORY_KEY_LABEL_MAP.securityEvent,
  content: WARNING_CATEGORY_KEY_LABEL_MAP.content,
	change_check: WARNING_CATEGORY_KEY_LABEL_MAP.changeCheck,
};
const levelMap = {
	严重: 5,
	高危: 4,
	中危: 3,
	低危: 2,
	安全: 1,
	未知: 0,
}
const casList = ['Web漏洞', 'SSL安全', '安全事件', '内容违规', '篡改'].map(i => {
	return {
		name: i,
		label: i,
		parent: '',
		value: TaskMap2[i],
		children: ['Web漏洞', 'SSL安全'].includes(i) ? Object.keys(levelMap).map(k => {
			return {
				label: k,
				name: k,
				parent: i,
				value: levelMap[k]
			}
		}) : i === '安全事件' ? Object.entries(WARNING_CATEGORY_KEY_LABEL_MAP.securityEvent).map(([key, label]) => {
			return {
				label,
				name: label,
				parent: i,
				value: key
			}
		})
		: i === '内容违规' ? Object.entries(WARNING_CATEGORY_KEY_LABEL_MAP.content).map(([key, label]) => {
			return {
				label,
				name: label,
				parent: i,
				value: key
			}
		}) :  i === '篡改' ? Object.entries(WARNING_CATEGORY_KEY_LABEL_MAP.changeCheck).map(([key, label]) => {
				return {
					label,
					name: label,
					parent: i,
					value: key
				}
			}) : []
	}
})
function TaskTable({
	match: {
		params: { assetType },
	},
	history,
	location,
	setRefresh,
}) {
	const resD = JSON.parse(sessionStorage.getItem('resD')) || {};
	const isPlanTimeOut =
		moment().unix() > moment(sessionStorage.planTimeOut).unix();
	const target_url = GetQueryString(location.search, 'target_url');
	const prefilter = new URLSearchParams(location.search).get('filter');
	const filterS = prefilter ? JSON.parse(prefilter) || {} : {};
	const defaultFilter_ = { ...defaultFilter, ...filterS };
	const [dialogVisible, setDialogVisible] = React.useState(false);
	const [filter, setFilter] = React.useState(defaultFilter_);
	const [tableData, setTableData] = React.useState({ data: [], count: 0 });
	const [selectedRows, setSelectedRows] = React.useState([]);
	const [sendData, setSendData] = React.useState();
	const [loading, setLoading] = React.useState(false);
	const [progressData, setProgressData] = React.useState([]);
	const [chooseTaskStatus, setChooseTaskStatus] = React.useState('');
	const [chooseTaskTriggerType, setChooseTaskTriggerType] = React.useState(
		'schedule'
	);
	const [now, setNow] = React.useState(Date.now());
	const timer = useRef();
	const searchProgress = row => {
		if (timer.current) clearInterval(timer.current);
		const task = cloneDeep(row);
		const isSearch = Object.keys(task.monitor_status).reduce((t, k) => {
			if (task.monitor_status[k].progress < 100) t += 1;
			return t;
		}, 0);
		setChooseTaskStatus(task.status);
		setChooseTaskTriggerType(task.trigger_type);
		if (isSearch && (task.status === 'active' || task.status === 'waiting')) {
			timer.current = setInterval(function () {
				fetchFer(
					`/api/v2/tasks/web_security/monitor_status?asset_task_id=${task.asset_task_id}`,
					{
						method: 'GET',
					}
				).then(res => {
					if (res.code === 200) {
						let taskStatus = 0;
						const data = Object.keys(TaskMap).reduce((t, i) => {
							if (Object.keys(row.monitor_status[i]).length > 0) {
								if (res.data[i].progress < 100) taskStatus += 1;
								t.push({ name: TaskMap[i] + '监测', ...res.data[i] });
							}
							return t;
						}, []);
						setProgressData(data);
						if (!taskStatus) {
							clearInterval(timer.current);
						}
					}
				});
			}, 3000);
		}
	};
	const progressDetail = row => {
		searchProgress(row);
		setChooseTaskTriggerType(row.trigger_type);
		const data = Object.keys(TaskMap).reduce((t, i) => {
			if (Object.keys(row.monitor_status[i]).length > 0) {
				t.push({ name: TaskMap[i] + '监测', ...row.monitor_status[i] });
			}
			return t;
		}, []);
		setProgressData(data);
		setDialogVisible(true);
	};

	const resultCol = item => {
		return Object.keys(TaskMap).map(taskType => {
			return {
				title: (
					<div className={cn(s.tac)}>
						{TaskMap[taskType]}
						<br />
						<span style={{ color: item[taskType]?.color || '#686C78' }}>
							{item[taskType]?.count === undefined
								? '- -'
								: item[taskType]?.count}
						</span>
					</div>
				),
				key: taskType,
				dataIndex: taskType,
				render(e, row) {
					return Object.keys(TaskSubMap[taskType]).map(k => (
						<div key={k}>
							{TaskSubMap[taskType][k] + ': '}
							<span
								style={e && e[k + '_color'] ? { color: e[k + '_color'] } : {}}
							>
								{e ? e[k] : '- -'}
							</span>
						</div>
					));
				},
			};
		});
	};
	const columns = [
		{
			title: '任务名称',
			key: 'name',
			dataIndex: 'name',
			render(val) {
				return <CopyBoard className={s.affect} text={val} />;
			},
		},
		{
			title: '资产地址',
			key: 'target_url',
			dataIndex: 'target_url',
			render(val) {
				return <CopyBoard className={s.affect} text={val} />;
			},
		},
		{
			title: '源站IP',
			key: 'source_ip',
			dataIndex: 'source_ip',
			render(val) {
				return val ? <CopyBoard className={s.affect} text={val} /> : '- -';
			},
		},
		{
			title: '任务类型',
			key: 'trigger_type',
			dataIndex: 'trigger_type',
			width: 120,
			render(e) {
				return <span>{taskType[e]}</span>;
			},
		},
		{
			title: '监测状态',
			key: 'status',
			dataIndex: 'status',
			width: 150,
			render(e, row) {
				return (
					<div>
						<span className={cn(s.dotSpan, s[e])}></span>
						<span
							className={s.circle}
							onClick={e === 'unknown' ? null : () => progressDetail(row)}
						>
							{e === 'unknown' ? '未知' : monitorStatus[e]}
						</span>
					</div>
				);
			},
		},
		{
			title: '最近一次监测结果',
			key: 'detail2',
			width: 260,
			dataIndex: 'detail',
			render(e, row) {
				return (
					<Tooltip
						overlay={
							<Table
								className={s.resultTable}
								columns={resultCol(
									Object.keys(row.last_result).reduce((t, i) => {
										t[i] = {
											count: row.last_result[i].count,
											color: row.last_result[i].color,
										};
										return t;
									}, {})
								)}
								data={[row.last_result]}
							></Table>
						}
						placement={'top'}
					>
						<div className={s.resultBox}>
							{Object.keys(TaskMap).map(i => (
								<span
									style={{
										color: row?.last_result[i]?.color || '#686C78',
										backgroundColor:
											bgColor[row?.last_result[i]?.color] || '#E6EAEF',
									}}
									key={i}
								>
									{row.last_result[i]?.hasOwnProperty('count')
										? row.last_result[i].count > 99
											? '99+'
											: row.last_result[i].count
										: '- -'}
								</span>
							))}
						</div>
					</Tooltip>
				);
			},
		},
		{
			title: '监测开关',
			key: 'enable_monitor',
			dataIndex: 'enable_monitor',
			width: 70,
			render(e, row) {
				const enableMonitor = row.enable_monitor;
				const id = row.asset_task_id;
				const type = row.trigger_type;
				return (
					<>
						{type === 'schedule' ? (
							<Switch
								checked={enableMonitor}
								defaultChecked={enableMonitor}
								onChange={checked => {
									changeSwitch(checked, id);
								}}
							/>
						) : (
							'- -'
						)}
					</>
				);
			},
		},
		{
			title: '操作',
			key: 'enable_monitor2',
			dataIndex: 'enable_monitor',
			width: 155,
			render(x, row) {
				const id = row.asset_task_id;
				const type = row.trigger_type;
				const jid = row.job_id;
				const tag = row.tag;
				const monitorType = ['waiting', 'active'];
				return (
					<div className={s.controlContainer}>
						<div className={s.control}>
							{row.is_result && (
								<Link
									className={s.item}
									to={{
										pathname: `/job-manage/web-task/detail`,
										search: `id=${id}&type=${type}&jid=${jid}&tag=${tag}`,
									}}
								>
									监测结果
								</Link>
							)}
							<Dropdown
								// visible={true}
								overlay={
									<Menu>
										{type === 'schedule' && (
											<Menu.Item key="1">
												<Link
													className={s.itemSpan}
													to={{
														pathname: '/job-manage/create-job-all',
														search: `assetType=web&atid=${id}`,
													}}
												>
													任务配置
												</Link>
											</Menu.Item>
										)}
										{type === 'manual' && monitorType.includes(row.status) && (
											<Menu.Item key="2">
												<span
													className={s.itemSpan}
													onClick={() => {
														stopTask([id]);
													}}
												>
													停止
												</span>
											</Menu.Item>
										)}
										<Menu.Item key="3">
											<span
												className={s.itemSpan}
												onClick={e => {
													handleDelete([id]);
												}}
											>
												删除
											</span>
										</Menu.Item>
										{type === 'manual' && row.status === 'stopped' && (
											<Menu.Item key="4">
												<span
													className={s.itemSpan}
													onClick={() => {
														repeatTask([id]);
													}}
												>
													重试
												</span>
											</Menu.Item>
										)}
									</Menu>
								}
								trigger={['click']}
								getPopupContainer={triggerNode => triggerNode.parentElement}
							>
								<a className={s.dropdown} onClick={e => e.preventDefault()}>
									管理
									<ChevronDown />
								</a>
							</Dropdown>
						</div>
					</div>
				);
			},
		},
	];
	const repeatTask = async ids => {
		const res = await fetchFer(`/api/v2/tasks/web_security/retry`, {
			method: 'POST',
			body: JSON.stringify({ asset_task_ids: ids }),
			checkStatus: 501,
		});
		if (res.code === 200) {
			Message.show({
				type: 'success',
				placement: 'top',
				message: `操作成功`,
			});
			getData();
			getResD();
			setRefresh(Math.random().toString(36).slice(-6));
		} else {
			Message.show({
				type: 'error',
				message: res.msg || res.message || '操作失败',
				placement: 'top',
			});
		}
	};
	const stopTask = async ids => {
		const res = await fetchFer(`/api/v2/tasks/web_security/stop`, {
			method: 'POST',
			body: JSON.stringify({ asset_task_ids: ids }),
			checkStatus: 501,
		});
		if (res.code === 200) {
			Message.show({
				type: 'success',
				placement: 'top',
				message: `操作成功`,
			});
			getData();
			getResD();
			setRefresh(Math.random().toString(36).slice(-6));
		} else {
			Message.show({
				type: 'error',
				message: res.msg || res.message || '操作失败',
				placement: 'top',
			});
		}
	};
	const changeSwitch = async (e, id) => {
		const change = async () => {
			ergodic();
			setLoading(true);
			const params = {
				asset_task_ids: [id],
				enable: e,
			};
			const res = await fetchFer(`/api/v2/jobs/web_security/task/switch`, {
				method: 'POST',
				body: JSON.stringify(params),
				checkStatus: 501,
			}).catch(err => {
				return err;
			});
			if (res.code === 200) {
				Message.show({
					type: 'success',
					message: res.message || '修改成功',
					placement: 'top',
				});
				setRefresh(Math.random().toString(36).slice(-6));
				e && getData();
			} else {
				Message.show({
					type: 'error',
					message: res.msg || res.message || '操作失败',
					placement: 'top',
				});
				ergodic();
			}
			setLoading(false);
		};
		const ergodic = () => {
			const tableData_ = tableData.data.map(item => {
				if (item.asset_task_id === id) {
					item.enable_monitor = !item.enable_monitor;
				}
				return item;
			});
			setTableData({ ...tableData, data: tableData_ });
		};
		if (!e) {
			confirm.warning({
				message: `你确定要关闭该监测任务吗？该操作将在下一周期生效。`,
				okText: '确定',
				cancelText: '取消',
				title: '',
				onOk: async () => {
					change();
				},
			});
		} else {
			change();
		}
	};
	const handleChangeSearch = e => {
		let filter_ = null;
		if (e && e.page) {
			filter_ = filterNull({ ...filter, ...e });
		} else {
			filter_ =
				e === 'r'
					? { ...defaultFilter, page: 1 }
					: filterNull({ ...filter, ...e, ...defaultFilter, page: 1 });
		}
		const backparams = JSON.stringify(filter_);
		const searchString = 'filter=' + encodeURI(backparams);
		setFilter(filter_);
		history.replace(`/job-manage/web-task?${searchString}`);
	};
	const cascaderSearchFilter = (inputValue, path) =>
	path.some(
		(option) => (option.label).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
	);
	const onSelectChange = newSelectedRowKeys => {
		setSelectedRows(newSelectedRowKeys);
	};
	const changeShow = () => {
		setSendData(null);
	};
	const handleDelete = id => {
		const asset_task_ids = id || selectedRows;
		confirm.warning({
			message: `确认删除选择的任务？`,
			okText: '删除',
			cancelText: '取消',
			title: '',
			onCancel: () => {
				setSelectedRows([]);
			},
			onOk: async () => {
				const res = await fetchFer(`/api/v2/jobs/web_security/task/del`, {
					method: 'POST',
					body: JSON.stringify({ asset_task_ids }),
				});
				if (res.code === 200) {
					Message.show({
						type: 'success',
						placement: 'top',
						message: `删除成功`,
					});
					if (asset_task_ids.length === tableData.data.length) {
						setFilter({ ...filter, page: filter.page - 1 });
					} else {
						getData();
					}
					setRefresh(Math.random().toString(36).slice(-6));
				} else {
					Message.show({
						type: 'error',
						message: '删除失败',
						placement: 'top',
					});
				}
				setSelectedRows([]);
			},
		});
	};
	const getData = async e => {
		setLoading(true);
		const sendData = { ...filter, ...e };
		const params = turnToUrlparam(sendData);
		const res = await fetchFer(`/api/v2/tasks/web_security/search?${params}`, {
			method: 'GET',
			checkStatus: 501,
		}).catch(e => {
			return {};
		});
		if (res.data.result.length < 1 && sendData.page > 1) {
			setFilter({ ...filter, limit: 10, page: sendData.page - 1 });
			getData({ limit: 10, page: sendData.page - 1 });
			return false;
		}

		if (res.code === 200) {
			if (res.data.result) {
				const data = res.data.result.map(e => {
					e.id = e.asset_task_id;
					e.key = e.asset_task_id;
					e.tag =
						filter.monitor_type === 'securityEvent'
							? 'security_event'
							: filter.monitor_type || 'vul';
					e.last_result = Object.keys(e.last_result).reduce((t, k) => {
						if (k !== 'score' && k !== 'security_event_severity' && e.last_result[k]?.hasOwnProperty('count')) {
							let level = -1; // 越小越高, 默认未知
							e.last_result[k].color = levelColor['0']; // 颜色默认安全
							Object.keys(TaskSubMap[k]).map(t => {
								if (e.last_result[k][t]) {
									if (
										(level > -1 && typeLevel.indexOf(t) < level) ||
										level === -1
									) {
										// 监测项总等级，根据内部最高项决定
										level = typeLevel.indexOf(t);
										e.last_result[k].color = typeColor[t];
									}
									if (
										k === 'security_event' &&
										e.last_result.security_event_severity
									) {
										e.last_result[k][t + '_color'] =
											levelColor[e.last_result.security_event_severity[t]] ||
											'';
										e.last_result[k].color =
											levelColor[
												Object.values(
													e.last_result.security_event_severity
												).sort((a, b) => {
													return Number(b) - Number(a);
												})[0]
											] || '';
									} else {
										e.last_result[k][t + '_color'] = typeColor[t] || '';
									}
								}
							});
						}
						t[k] = e.last_result[k];
						return t;
					}, {});
					return e;
				});
				setTableData({
					data,
					count: res.data.count,
				});
			}
		}
		setLoading(false);
	};
	useMemo(() => {
		if (target_url) {
			setFilter({ ...filter, target_url });
		}
	}, []);
	useEffect(() => {
		getData();
	}, [filter]);
	return (
		<div className={s.content}>
			<Link
				className={s.itemSpan}
				to={
					isPlanTimeOut ||
					(!resD?.feature?.vulTask &&
						!resD?.feature?.vulManualTask &&
						!resD?.feature?.sslTask &&
						!resD?.feature?.sslManualTask &&
						!resD?.feature?.securityEventTask &&
						!resD?.feature?.securityEventManualTask &&
						!resD?.feature?.contentTask &&
						!resD?.feature?.contentManualTask)
						? {}
						: {
								pathname: '/job-manage/create-job-all',
								search: `assetType=web`,
						  }
				}
			>
				<Button
					onClick={
						isPlanTimeOut ||
						(!resD?.feature?.vulTask &&
							!resD?.feature?.vulManualTask &&
							!resD?.feature?.sslTask &&
							!resD?.feature?.sslManualTask &&
							!resD?.feature?.securityEventTask &&
							!resD?.feature?.securityEventManualTask &&
							!resD?.feature?.contentTask &&
							!resD?.feature?.contentManualTask)
							? () => {
									return Message.show({
										type: 'error',
										message: '请先升级套餐服务',
									});
							  }
							: null
					}
					primary={true}
				>
					新建监测任务
				</Button>
			</Link>
			<div className={s.search}>
				<Input
					onChange={target_url => {
						setFilter({ ...filter, target_url, page: 1 });
					}}
					className={s.input}
					placeholder="请输入资产地址"
					after={
						<SearchIcon
							className={s.icon}
							onClick={() => {
								handleChangeSearch();
							}}
						/>
					}
					value={filter.target_url}
					onPressEnter={() => {
						handleChangeSearch();
					}}
					type="search"
				/>
				<div className={s.selectContainer}>
					<Cascader size='middle'
						showSearch={{ filter: cascaderSearchFilter }}
						getPopupContainer={node => node.parentElement}
						popupClassName={'cascaderItem'}
						className={cn('ml10 mul-cascader w160', s.item)}
						options={casList}
						suffixIcon={<span className="cascader-icon"></span>}
						value={filter?.monitor_type && (filter?.level+'') ? [filter?.monitor_type, filter?.level] : []}
						onChange={e => {
							handleChangeSearch({ monitor_type: e[0], level: e[1] })
						}}
						placeholder='请选择监测项/监测结果'
					/>
					<Select
						placeholder="任务类型"
						className={s.item}
						value={filter.trigger_type}
						allowClear={true}
						getPopupContainer={triggerNode => triggerNode}
						onChange={trigger_type => {
							handleChangeSearch({ trigger_type });
						}}
					>
						<Option value="schedule">周期性任务</Option>
						<Option value="manual">单次任务</Option>
					</Select>
					<Select
						placeholder="监测状态"
						className={s.item}
						value={filter.status}
						allowClear={true}
						getPopupContainer={triggerNode => triggerNode}
						onChange={status => {
							handleChangeSearch({ status });
						}}
					>
						{Object.keys(monitorStatus).map(e => {
							return (
								<Option value={e} key={e}>
									{monitorStatus[e]}
								</Option>
							);
						})}
					</Select>
					<Button
						className={s.btn}
						onClick={() => {
							// setFilter(defaultFilter);
							handleChangeSearch('r');
						}}
					>
						重置
					</Button>
				</div>
			</div>
			<div className={s.tableContainer}>
				<Table
					rowSelection={{
						selectedRowKeys: selectedRows,
						onChange: onSelectChange,
					}}
					columns={columns}
					key={Date.now()}
					data={tableData?.data}
					pro
					loading={loading}
					empty={<EmptyData className={s.nobor} />}
				/>
				<div className={s.secondRow}>
					<div className={s.lineBtn}>
						<Button
							link
							disabled={!selectedRows.length}
							className={s.highLight}
							onClick={() => {
								handleDelete();
							}}
						>
							批量删除
						</Button>
					</div>
					{tableData.count > 10 && (
						<Pagination
							current={filter.page || 1}
							pageSize={filter.limit || 10}
							pageSizeOptions={[10, 20, 50]}
							showSizeChanger
							showQuickJumper
							showTotal={total => `共${total}条`}
							total={tableData.count}
							onChange={(page, limit) => {
								handleChangeSearch({ page, limit });
							}}
						/>
					)}
				</div>
			</div>
			<CheckAlert data={sendData} type={0} changeShow={changeShow}></CheckAlert>
			<Dialog
				visible={dialogVisible}
				className={cn(s.dialog, {
					[s.w800]: chooseTaskTriggerType === 'schedule',
				})}
				title="进度详情"
				confirmText=""
				cancelText="关闭"
				onhide={() => {
					if (timer.current) clearInterval(timer.current);
					setDialogVisible(false);
					if (chooseTaskStatus === 'active' || chooseTaskStatus === 'waiting') {
						getData();
					}
				}}
			>
				<div className={s.p20}>
					<Table
						className={s.maxWunset}
						key={chooseTaskTriggerType}
						columns={[
							{
								title: '监测项',
								key: 'name',
								dataIndex: 'name',
							},
							{
								title: '检测开始时间',
								key: 'start_time',
								dataIndex: 'start_time',
								render(e, row) {
									return (
										<span>
											{e && moment(e).format('YYYY-MM-DD HH:mm:ss') || '- -'}
										</span>
									);
								},
							},
							{
								title: '检测进度',
								key: 'detail',
								dataIndex: 'detail',
								width: 280,
								render(e, row) {
									return (
										<div>
											<span className={s.circle}>
												{monitorStatus[row.status]}
											</span>
											{row.status !== 'unkonwn' && (
												<>
													<Progress
														percent={row.progress || 0}
														showInfo={false}
														className={s.Progress}
														strokeColor={
															row.status === 'stopped' ? '#D9D9D9' : '#0b73da'
														}
													/>
													<span className={s.circle}>{row.progress || 0}%</span>
												</>
											)}
										</div>
									);
								},
							},
							...(chooseTaskTriggerType !== 'schedule'
								? []
								: [
										{
											title: '下次检测时间',
											key: 'next_time',
											dataIndex: 'next_time',
											render(e, row) {
												return (
													<span>
														{(e && moment(e).format('YYYY-MM-DD HH:mm:ss')) || '- -'}
													</span>
												);
											},
										},
								  ]),
						]}
						data={progressData}
						pro
						loading={loading}
						empty={<EmptyData className={s.nobor} />}
					/>
				</div>
			</Dialog>
		</div>
	);
}

TaskTable.propTypes = {
	match: PropTypes.any,
	location: PropTypes.any,
	history: PropTypes.any,
};
TaskTable.defaultProps = {
	className: '',
};

export default withRouter(TaskTable);
